import React from 'react';
import { Button, Modal, Form, Input, List, Spin } from 'antd';
import styles from './index.less';

const { Search } = Input;
const SlotModal = Form.create({ name: 'form_in_modal' })(
  class extends React.Component {
    render() {
      const {
        visible,
        onCancel,
        searchSlot,
        listData,
        addSlot,
        loading,
        total,
        pageChange,
        alreadyExisted,
      } = this.props;
      return (
        <Modal footer={null} title="添加词槽" visible={visible} onCancel={onCancel} width={460}>
          <div>
            <Search
              placeholder="请输入已有词槽"
              onSearch={value => searchSlot(value)}
              style={{ width: 350 }}
            />
            <a href="/knowledgeDesign/wordTroughManage" style={{ marginLeft: 26 }}>
              新建
            </a>
          </div>
          <div>
            <List
              size="small"
              footer={null}
              loading={loading}
              itemLayout="vertical"
              pagination={{
                onChange: page => {
                  pageChange(page);
                },
                total: parseInt(total),
                pageSize: 5,
              }}
              dataSource={listData ? listData : []}
              style={{ marginTop: 10 }}
              renderItem={items => (
                <List.Item style={{ border: 'none', padding: '6px 0' }}>
                  {
                    // alreadyExisted.length>0?
                    // alreadyExisted.map((i)=>{
                    //    return(
                    //      i.key === items.key ?
                    //        <div><Button htmlType='button' type="primary" size='small' className={styles.selectBtn} onClick={() =>addSlot(items)}>已选择</Button>{items.name}</div>
                    //        :
                    //        <div><Button htmlType='button' type="primary" size='small' className={styles.selectBtn} onClick={() =>addSlot(items)}>选择</Button>{items.name}</div>
                    //    )
                    // })
                    // :
                    <div>
                      <Button
                        htmlType="button"
                        type="primary"
                        size="small"
                        className={styles.selectBtn}
                        onClick={() => addSlot(items)}
                      >
                        选择
                      </Button>
                      {items.name}
                    </div>
                  }
                </List.Item>
              )}
            />
          </div>
        </Modal>
      );
    }
  }
);

export default SlotModal;
